<template>
    <el-row>
        <el-col class="btn">
            <el-dialog :visible.sync="dialogVisible" width="1400px" :before-close="handleClose" @close="handleClose()"
                class="dia">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{form.id!=null?'修改证书':'添加证书'}}</span>
                </div>
                <el-col class="box box-pacl-start">
                    <div class="left" v-if="form.type == `1`">
                        <div id="pdfDom">
                            <div class="proBox">
                                <!-- <img class="top" src="https://yhykt.oss-cn-beijing.aliyuncs.com/29900C07657A4CAD828D2EF230573A4D73b23f4d1134d01016963f7efd51fb5.png?Expires=4799035370&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=M6%2FofmzPGy78UDg6dKAy%2BmETAPM%3D" alt=""> -->
                                <p class="tit">{{form.name}}</p>
                                <p class="con">
                                    <span class="con-name">____</span>同学:<br>
                                    <span class="content">{{form.text}}</span><br>
                                    <span class="content-bottom">特发此证，以兹鼓励！</span>
                                </p>
                                <div class="con-unit">
                                    <!-- <p>{{form.yzcont}}</p> -->
                                    <p class="time">____年__月__日</p>
                                </div>

                                <div class="chapter" v-show="form.isShow">
                                    <canvas id="chapterCanvas" width="150" height="150"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="left" v-if="form.type == `2`">
                        <div id="pdfDom">
                            <div class="proBox left2">
                                <img class="top"
                                    src="https://yhykt.oss-cn-beijing.aliyuncs.com/29900C07657A4CAD828D2EF230573A4D73b23f4d1134d01016963f7efd51fb5.png?Expires=4799035370&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=M6%2FofmzPGy78UDg6dKAy%2BmETAPM%3D"
                                    alt="">
                                <p class="tit">{{form.name}}</p>
                                <p class="con">
                                    <span class="con-name"></span>____同学:<br>
                                    <span class="content">{{form.text}}</span><br>
                                    <span class="content-bottom">特发此证，以兹鼓励！</span>
                                </p>
                                <div class="con-unit">
                                    <!-- <p>{{form.yzcont}}</p> -->
                                    <p class="time">____年__月__日</p>
                                </div>

                                <div class="chapter" v-show="form.isShow">
                                    <!-- <canvas id="chapterCanvas" width="150" height="150"></canvas> -->
                                    <img style="width:150px;height:150px;" :src="form.bm" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="reset-form">
                            <!-- <el-form-item>
                                <el-radio v-model="form.type" label="1">横版</el-radio>
                                <el-radio v-model="form.type" label="2">竖版</el-radio>
                            </el-form-item> -->
                            <el-form-item label="证书名称" prop="name">
                                <el-input v-model="form.name" class="text w300" placeholder="填写证书名称"></el-input>
                            </el-form-item>
                            <el-form-item label="类型">
                                <el-select v-model="form.certtype">
                                    <el-option value='1' label="结课"></el-option>
                                    <el-option value='2' label="打卡"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="正文内容" prop="text">
                                <el-input type="textarea" placeholder="填写正文内容" v-model="form.text"></el-input>
                            </el-form-item>
                            <el-form-item label="印章" prop="bm" ref="bm">
                                <el-upload class="avatar-uploader" :action="uploadfileurl" :show-file-list="false"
                                    :on-progress="progress" :on-success="success" :before-upload="beforeUpload"
                                    accept=".jpg, .jpeg, .png">
                                    <img v-if="form.bm" :src="form.bm" class="avatar">
                                    <div v-else class="upload-icon">
                                        <i class="el-icon-upload"></i>
                                        <div>上传</div>
                                    </div>
                                </el-upload>
                                <el-progress v-if="showProgress" :percentage="progInt"></el-progress>
                            </el-form-item>
                            <!-- <el-form-item label="生成印章">
                                <el-switch v-model="form.isShow" active-color="#626BF1" inactive-color="#d8d8d8"
                                    @change="change">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="印章内容" prop="yzcont">
                                <el-input v-model="form.yzcont" class="text" placeholder="填写印章内容" @input="getChapter()">
                                </el-input>
                            </el-form-item> -->
                        </el-form>
                    </div>
                </el-col>

                <span slot="footer" class="dialog-footer">
                    <!-- <el-switch inactive-color="#67c23a" v-model="downType" active-text="图片下载" inactive-text="pdf下载"
                        style="margin-right: 20px;">
                    </el-switch>
                    <el-checkbox v-model="form.isShow" style="margin-right: 20px;">添加盖章</el-checkbox>
                    <el-button type="primary" @click="getPdf('#pdfDom')">下载</el-button> -->
                    <el-button class="reset-cancel-btn" @click="handleClose()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="onSubmit()">{{form.id!=null?'保存':'确定添加'}}</el-button>
                </span>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: {
            dialogVisible: {
                default: false
            },
            title: {
                default: '提示'
            },
            info: {}
        },
        data() {
            return {
                rules: {
                    name: [{
                        required: true,
                        message: '请输入证书名称',
                        trigger: 'blur'
                    }],
                    text: [{
                        required: true,
                        message: '请输入内容',
                        trigger: 'blur'
                    }],
                    bm: [{
                        required: true,
                        message: '请上传印章',
                        trigger: 'change'
                    }]
                },
                showProgress: false,
                progInt: 0,
                uploadfileurl: this.$url.baseURL + '/upload/uploadfile',
                dia: false,
                user: this.$store.state.loginInfo.user.name,
                schoolList: [],
                searchText: '',
                form: {
                    id: null,
                    name: '劳动之星',
                    text: '在2020至2021学年度，开展的劳动教育课程及实践表现突出，被评为“劳动之星”。',
                    bm: 'https://yhykt.oss-cn-beijing.aliyuncs.com/64A52C073A9D4D71A625E3C17A1DE0344870d8e0c8dc7464d40244f6c3e702b.png?Expires=4809579503&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=FBrMjsQ9ahQ4hnuWWa46%2BoSgRV4%3D',
                    isShow: true,
                    yzcont: '学院学工部',
                    type: '2', //版式  横版&竖版
                    certtype: '1', //证书类型：结课、打卡
                },
                labelWidth: '100px',
                //
                pageData: null, //接收html格式代码
                htmlTitle: "结业证书",
                isShow: false,
                isCanvas: false,
                downType: true, // false为 pdf , true为图片
                schoolid: this.$store.state.schoolId,
                hburl: "https://yhykt.oss-cn-beijing.aliyuncs.com/1A69DA6DDA4E41C88DDA68775A137D2463d1fa725f03a55abd46f616682b6c0.png?Expires=4801186687&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=OZfBcui8%2FV8Con86AQ4rmgxFkcQ%3D",
                sburl: "https://yhykt.oss-cn-beijing.aliyuncs.com/1A69DA6DDA4E41C88DDA68775A137D2463d1fa725f03a55abd46f616682b6c0.png?Expires=4801186687&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=OZfBcui8%2FV8Con86AQ4rmgxFkcQ%3D"
            }
        },
        mounted() {
            // this.searchSchool();
            // this.preview()
        },
        methods: {
            setInfo() {
                this.$nextTick(res => {
                    this.form = {
                        id: this.info.id,
                        name: this.info.name,
                        text: this.info.cont,
                        bm: 'https://yhykt.oss-cn-beijing.aliyuncs.com/64A52C073A9D4D71A625E3C17A1DE0344870d8e0c8dc7464d40244f6c3e702b.png?Expires=4809579503&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=FBrMjsQ9ahQ4hnuWWa46%2BoSgRV4%3D',
                        isShow: Number(this.info.isGenerate) == 1 ? true : false,
                        yzcont: this.info.yzcont,
                        type: "2",
                        certtype: this.info.type
                    }
                    console.log(this.form);
                })

            },
            handleRemove(file) {
                console.log(file);
            },
            progress(event) {
                this.showProgress = true;
                this.progInt = parseInt(event.loaded / event.total * 100, 10);
            },
            success(response, file, fileList) {
                this.showProgress = false;
				if(response.state.code == 0){
					 this.form.bm = response.body.data.url;
				}
                this.$refs['bm'].clearValidate()
            },
            beforeUpload(file) {
                const fileName = file.name;
                const index = fileName.lastIndexOf(".");
                const ext = fileName.substr(index + 1);
                const arr = ["jpg", "png", "jpeg"];
                const isOk = arr.includes(ext);
                if (!isOk) {
                    this.$message.warning('封面格式暂不支持！');
                    return false;
                }
                var imgSize = file.size / (1024 * 1024);
                if (imgSize > 50) {
                    this.$message.warning(`当前文件${ parseInt(imgSize) }M,上传文件不能超过50M`)
                    return false
                }
            },
            handleClose() {
                this.$emit('closeTk');
                this.$refs['form'].resetFields();
            },
            change(e) {
                console.log(e);
            },
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let url;
                        let params = {
                            name: this.form.name,
                            schoolId: this.schoolid,
                            createUserName: this.user,
                            fileId: parseInt(this.form.type),
                            bgImgUrl: parseInt(this.form.type) == `1` ? this.hburl : this.sburl,
                            cont: this.form.text,
                            orgName: this.form.bm,
                            isGenerate: this.form.isShow == true ? 1 : 0,
                            type: parseInt(this.form.certtype),
                            style: this.form.type,
                            yzcont: this.form.yzcont
                        };

                        if(this.form.id == null){
                            url = '/ycert/add';
                        }else{
                            url='/ycert/modify';
                            params.id = this.form.id
                        }
                        console.log(params);
                        this.$ajax.post(url,params).then(res => {
                            console.log(res);
                            if (res.code == '0') {
                                this.$emit('updateList')
                                this.$message.success('操作成功！');
                            } else {
                                this.$message.error('操作失败！');
                            }
                            this.handleClose();
                        })
                    } else {
                        return false;
                    }
                });




            },
            preview() {
                console.log(this.form);
                this.$nextTick(() => {
                    this.form.id =null
                    if (!this.isCanvas) {
                        // 只绘画一次
                        this.isCanvas = true
                        // this.setInfo()
                    }
                })

            },
            // 生成印章
            getChapter() {
                this.isCanvas = true
                var canvas = document.getElementById("chapterCanvas");
                var context = canvas.getContext("2d");
                // context.clearRect(0, 0, 200, 200);//清除整个画布
                canvas.height = canvas.height;
                var text = this.form.bm;
                var companyName = this.form.yzcont;
                //  context.translate(0, 0);
                // 绘制印章边框
                var width = canvas.width / 2;
                var height = canvas.height / 2;
                context.lineWidth = 3;
                context.strokeStyle = "#cf0c0c";
                context.beginPath();
                context.arc(width, height, 60, 0, Math.PI * 2); //宽、高、半径
                context.stroke();

                //画五角星
                create5star(context, width, height, 15, "#cf0c0c", 0);

                // 绘制印章名称
                context.font = "16px 宋体";
                context.textBaseline = "middle"; //设置文本的垂直对齐方式
                context.textAlign = "center"; //设置文本的水平对对齐方式
                context.lineWidth = 1;
                context.strokeStyle = "#cf0c0c";
                context.strokeText(text, width, height + 30); // 名称 xx专用章

                // 绘制印章单位
                context.translate(width, height); // 平移到此位置,
                context.font = "20px 宋体";
                var count = companyName.length; // 字数
                var angle = (3 * Math.PI) / (3 * (count - 1)); // 字间角度
                var chars = companyName.split("");
                var c;
                for (var i = 0; i < count; i++) {
                    c = chars[i]; // 需要绘制的字符
                    if (i == 0) {
                        context.rotate((6 * Math.PI) / 6); // 文字起始位置
                    } else {
                        context.rotate(angle);
                    }

                    context.save();
                    context.translate(45, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
                    context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
                    context.strokeText(c, 0, 0); // 此点为字的中心点
                    context.restore();
                }

                //绘制五角星
                function create5star(context, sx, sy, radius, color, rotato) {
                    context.save();
                    context.fillStyle = color;
                    context.translate(sx, sy); //移动坐标原点
                    context.rotate(Math.PI + rotato); //旋转
                    context.beginPath(); //创建路径
                    var x = Math.sin(0);
                    var y = Math.cos(0);
                    var dig = (Math.PI / 5) * 4;
                    for (var i = 0; i < 5; i++) {
                        //画五角星的五条边
                        var x = Math.sin(i * dig);
                        var y = Math.cos(i * dig);
                        context.lineTo(x * radius, y * radius);
                    }
                    context.closePath();
                    context.stroke();
                    context.fill();
                    context.restore();
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .dia {
        height: 100%;
    }

    .top {
        position: absolute;
        width: 150px;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }


    .main {
        height: 100%;

        .create-btn {
            width: 182px;
            background-color: #4c87ff;
            border-radius: 21px;
        }

        .el-dialog-div {
            display: flex;
            flex-direction: column;
            height: 400px;

            .info {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .info-form {
                    display: flex;
                    // width: 403px;
                    height: 218px;

                    .img-up {
                        margin-left: 50px;
                        display: grid;
                    }
                }

                .upPic {
                    width: 304px;
                    height: 216px;
                    background-color: #f8f9fd;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    border: solid 1px #d6dbe8;
                    border-radius: 5px;
                }

                .line-center {
                    display: flex;
                    flex-direction: column;
                    // justify-content: flex-start;
                    align-content: space-between;
                }
            }

            .type {
                padding: 0 0 30px 0;
                width: 100%;
                height: 190px;

                .type-item {
                    display: flex;
                    justify-content: center;

                    // align-items: center;
                    .type-list {
                        margin-right: 20px;
                        width: 229px;
                        height: 158px;
                        background-color: #fefefe;
                        border-radius: 5px;
                        border: solid 1px #d6dbe8;

                        .type-bg {
                            text-align: center;
                            width: 100%;
                            height: 103px;
                        }

                        .type-info {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            .n1 {
                                font-size: 18px;
                                color: #2e323e;
                            }

                            .n2 {
                                font-size: 12px;
                                color: #888fa0;
                            }
                        }

                        // &:hover {
                        // 	cursor: pointer;
                        // 	border: solid 1px #5b90ff;
                        // }

                        &.checked {
                            border: solid 1px #5b90ff;
                        }
                    }
                }

            }
        }
    }

    .h-auto {
        height: calc(100% - 80px);
    }

    .slt {
        margin: 15px auto 0;
        width: 300px;
        height: 83px;
        box-sizing: border-box;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .slt .img {
        width: 48px;
        height: 48px;
        margin-right: 10px;
        border: 2px solid #fff;
    }

    .slt .img.checked {
        border: 2px solid #00aeff;
    }


    .up-img-div {
        position: relative;
        width: 300px;
        height: 224px;
    }

    .el-upload {
        position: relative;
    }

    .posa-icon {
        background: rgba(3, 3, 3, .3);
        border-radius: 2px;
        padding: 0 15px 0 15px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .el-upload {
        height: 144px;
    }

    .avatar {
        width: 150px;
        height: 150px;
        display: block;
    }

    .class-list {

        &>>>.el-form-item__content {
            display: flex;
        }
    }

    .add-course>>>.el-dialog {
        height: 100%;
    }

    .psa-img {
        padding-top: 10px;
    }

    .addclassbtn {
        margin: 0 0 5px 235px;
    }

    .delcs {
        margin-left: 10px;
    }


    // 证书
    ::v-deep .el-dialog__body {
        padding: 0px;
        display: flex;
        justify-content: center;
    }

    #pdfDom {
        /* 要想pdf周边留白，要在这里设置 */
        padding: 20px;
        width: 750px;

    }

    .right>>>.el-radio__input.is-checked+.el-radio__label {
        color: #626BF1;
    }

    .right>>>.el-radio__input.is-checked .el-radio__inner {
        border-color: #626BF1;
        background-color: #626BF1;
    }

    .right>>>.el-radio__inner:hover {
        border-color: #626BF1;
    }

    .proBox {
        background: url("https://yhykt.oss-cn-beijing.aliyuncs.com/96B3CAB46BBD4FA48E861776254786A4hbzs.png?Expires=4781038936&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=wLdsTBtAkljvkd2J4MEEHoKckOU%3D") no-repeat bottom;
        background-size: cover;
        width: 697px;
        height: 492px;
        // padding: 90px 94px;
        box-sizing: border-box;
        margin: 0 auto;
        position: relative;
        color: #000;
        font-family: SimSun;
    }

    .proBox.left2 {
        background: url("https://yhykt.oss-cn-beijing.aliyuncs.com/06E7B6B504494073B60D9F4A1C36091B63d1fa725f03a55abd46f616682b6c0.png?Expires=4799035076&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=hEjShY2r%2F4P7JhZgXFOdKExU46U%3D") no-repeat;
        background-size: cover;
        width: 520px;
        height: 737px;
    }

    .proBox.left2 .tit {
        top: 100px;
    }

    .tit {
        color: #9F643A;
        font-size: 36px;
        font-weight: 700;
        position: relative;
        top: 60px;
        left: 8px;
        letter-spacing: 20px;
        font-family: STHeiti;
        margin: 20px 0;
    }

    .proid {
        text-align: right;
        margin: 0;
        font-weight: 500;
        /* margin-right: 5px; */
    }

    .proBox.left2 .con {
        top: 130px;
    }

    .con {
        position: relative;
        top: 80px;
        left: 8px;
        padding: 0 80px;
        font-size: 20px;
        font-weight: 700;
        text-align: left;
        margin: 10px 0;
        line-height: 32px;
        text-indent: 2em;
        color: #9F643A;
    }

    .con-name {
        font-family: 华文行楷, STXingkai;
        border-bottom: 2px solid #9F643A;
    }

    .content {
        padding-left: 75px;
    }

    .content-bottom {
        padding-left: 75px;
    }

    .con-unit {
        font-size: 18px;
        font-weight: 700;
        position: absolute;
        right: 100px;
        bottom: 39px;
        text-align: center;
        letter-spacing: 3px;
        color: #9F643A;
    }

    .con-unit p {
        margin: 5px 0;
    }

    .con-footer {
        font-size: 18px;
        font-weight: 700;
        position: absolute;
        bottom: 30px;
        left: 0;
        right: 0;
        text-align: center;
    }

    .chapter {
        border-radius: 50%;
        position: absolute;
        bottom: 30px;
        right: 80px;
    }

    .upload-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 110px;
        line-height: 110px;
        color: #6872ff;
        font-size: 30px;
        border-radius: 10px;
        border: .1px #e7ebf0 solid;

        div {
            height: 20px;
            line-height: 20px;
            font-size: 10px;
            color: #a7abb1;

        }

        &:hover {
            color: #626BF1;

            div {
                color: #626BF1;
            }
        }
    }
</style>
